<template>
	<comp-navbar title="创建仪式" bgColor="#fff" :fixed="true" :z-index="999999"></comp-navbar>
	<up-form ref="form" :model="formstate">
		<view class="add_wrap">
			<view class="form_wrap">
				<view class="title">客户登记（必填）</view>
				<view class="form_item flex">
					<view class="form_l">客户姓名</view>
					<up-input type="text" placeholder="请填写客户姓名" class="com_input" v-model="formstate.name" />
				</view>
				<view class="form_item flex">
					<view class="form_l">客户手机号</view>
					<input type="number" placeholder="请填写客户手机号" class="com_input" />
				</view>
			</view>
			<view class="form_wrap">
				<view class="title">仪式信息（必填）</view>
				<view class="form_item flex">
					<view class="form_l">仪式名称</view>
					<input type="text" placeholder="请填写仪式名称" class="com_input" />
				</view>
				<view class="form_item flex">
					<view class="form_l">所属展厅</view>
					<view class="pick_select flex" @click="handlezt">
						<view class="pick_text">{{ztvalue}}</view>
						<view class="iconfont icon-youjiantou"></view>
					</view>
					<comp-picker :show="ztshow" :columns="ztcolumns" @cancel="ztshow=false" @confirm="handlezt_confirm"
						keyName="label" :defaultIndex="[ztindex]"></comp-picker>
				</view>
				<view class="form_item flex">
					<view class="form_l">仪式类型</view>
					<view class="pick_select flex" @click="handleys">
						<view class="pick_text">{{ysvalue}}</view>
						<view class="iconfont icon-youjiantou"></view>
					</view>
					<comp-picker :show="ysshow" :columns="yscolumns" @cancel="ysshow=false" @confirm="handleys_confirm"
						keyName="label" :defaultIndex="[ysindex]"></comp-picker>
				</view>
				<view class="form_item flex">
					<view class="form_l">仪式日期</view>
					<view class="flex">
						<view class="flex com_date">
							<up-datetime-picker hasInput :show="dateshow" v-model="datevalue" mode="date"
								:minDate="mindate"></up-datetime-picker>
							<view class="iconfont icon-ico_yuyueguanli_jiedaiyuyue"></view>
						</view>
						<view class="flex com_date">
							<up-datetime-picker hasInput :show="timeshow_l" v-model="timevalue"
								mode="time"></up-datetime-picker>
							<view class="iconfont icon-shijian"></view>
						</view>
						<view class="flex com_date">
							<up-datetime-picker hasInput :show="timeshow_r" v-model="timevalue2"
								mode="time"></up-datetime-picker>
							<view class="iconfont icon-shijian"></view>
						</view>
					</view>
				</view>
				<view class="form_item flex">
					<view class="form_l">大屏互动</view>
					<up-switch v-model="interactive" @change="change"></up-switch>
				</view>
			</view>
			<view class="form_wrap">
				<view class="title">逝者信息（选填）</view>
				<view class="tab_wrap flex">
					<view class="tab_btn" :class="[tabIndex == 0 ? 'tab_act': '']" @click="handleTab(0)">手动添加</view>
					<view class="tab_btn" :class="[tabIndex == 1 ? 'tab_act': '']" @click="handleTab(1)">墓穴查询</view>
				</view>
				<view class=""></view>
			</view>
			<up-button class="savebtn" @click="handlesave" text="提交"></up-button>
			<!-- <button form-type="submit" class="savebtn">保存</button> -->
		</view>
	</up-form>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	const form = ref(null);
	const formstate = reactive({
		name: '',
		rules: {
			name: {
				type: 'string',
				required: true,
				message: '请填写姓名',
				trigger: ['blur', 'change'],
			}
		}
	})
	// 展厅
	const ztshow = ref(false);
	const ztcolumns = ref([
		[{
			label: '展厅1',
			id: 1
		}, {
			label: '展厅2',
			id: 2
		}, {
			label: '展厅3',
			id: 3
		}]
	]);
	const ztvalue = ref(ztcolumns.value[0][0].label)
	const ztindex = ref(0)
	const handlezt = () => {
		ztshow.value = true
	}
	const handlezt_confirm = ({
		index,
		value
	}) => {
		ztshow.value = false
		console.log('pp', index, value)
		ztindex.value = index;
		ztvalue.value = value[0].label
	}
	// 仪式类型
	const ysshow = ref(false);
	const yscolumns = ref([
		[{
			label: '追思',
			id: 1
		}, {
			label: '祭拜',
			id: 2
		}, {
			label: '思念',
			id: 3
		}]
	]);
	const ysvalue = ref(yscolumns.value[0][0].label)
	const ysindex = ref(0)
	const handleys = () => {
		ysshow.value = true
	}
	const handleys_confirm = ({
		index,
		value
	}) => {
		ysshow.value = false
		ysindex.value = index;
		ysvalue.value = value[0].label
	}
	// 日期
	const dateshow = ref(false)
	const datevalue = ref(Date.now())
	const mindate = ref(Date.now())
	const timeshow_l = ref(false)
	const timeshow_r = ref(false)
	const timevalue = ref('')
	const timevalue2 = ref('')

	// 大屏互动
	const interactive = ref(true)

	// 逝者信息
	const tabIndex = ref(0);
	const handleTab = (num) => {
		tabIndex.value = num;
	}

	// 提交
	const handlesave = (e) => {

		form.value.validate().then(res => {
			uni.$u.toast('校验通过')
		}).catch(errors => {
			console.log(errors)
			uni.$u.toast('校验失败')
		})
	}
</script>

<style lang="scss">
	.add_wrap {

		padding: 120rpx 20rpx 20rpx 20rpx;

		.form_wrap {
			font-size: 28rpx;

			.title {
				margin-bottom: 20rpx;
				font-weight: bold;
				text-align: center;
			}

			.form_item {
				margin-bottom: 20rpx;

				.form_l {
					width: 160rpx;
				}

				.com_input {
					flex: 1;
					padding-left: 20rpx;
					height: 60rpx;
					line-height: 60rpx;
					border: 1rpx solid $bor-color;
					box-sizing: border-box;
					border-radius: 6rpx;
				}

				.pick_select {
					flex: 1;
					justify-content: space-between;
					padding-left: 20rpx;
					height: 60rpx;
					line-height: 60rpx;
					border: 1rpx solid $bor-color;
					box-sizing: border-box;
					border-radius: 6rpx;
				}

				.com_date {
					margin-left: 20rpx;
					padding-right: 10rpx;
					border: 1rpx solid $bor-color;
					box-sizing: border-box;
					border-radius: 6rpx;

					&:first-child {
						margin-left: 0;
					}
				}

				:deep(.u-input) {
					border: none !important;
				}
			}

			.tab_wrap {

				.tab_btn {
					width: 200rpx;
					height: 80rpx;
					margin-right: 20rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					text-align: center;
					color: #fff;
					background-color: $act-color;
					border-radius: 6rpx;

					&.tab_act {
						background-color: $base-bg;
					}

				}
			}
		}

		.savebtn {
			width: 90%;
			height: 80rpx;
			margin: 40rpx auto;
			line-height: 80rpx;
			font-size: 28rpx;
			text-align: center;
			color: #fff;
			background-color: $act-color;
			border-radius: 40rpx;
		}
	}
</style>